<extend name="Base/common" />
<block name="style">
    <!-- 引入样式 -->
    <load href="__PUBLIC__/Home/css/regist.css"/>
    <load href="__PUBLIC__/Home/css/public.css"/>
</block>

<block name="body">

        <!-- 头部 -->

        <div class="padding-white" ></div>

        <!-- 注册表主体开始 -->
        <div class="registMainBox">
            <!-- 注册栏左侧 开始 -->
            <div class="regist-wrapper" style="margin-top:80px;">

                <div class="tabs-basic">
            		<ul>
            			<li><a class="tab-active" data-index="0" href="#">账号注册</a></li>
            			<li><a data-index="1" href="#">快速注册</a></li></ul>
                    <!-- 注册表单 -->
                    <form action="{:U('Home/User/register')}" method="post" >
            		<div class="tabs-content-placeholder">
            			<div class="tab-content-active">

                            <!-- 用户名 -->

                            <input type="text" name="username" placeholder="*(6位以上数字字母下划线,不能以数字开头)" class="textInput w320" id="username"   autocomplete="off"/>

                            <span class="re_tips" id="nametips"></span>

                            <!-- 密码 -->
                            <input type="password" name="password" placeholder="*密码" class="textInput w320" id="password" />

                            <span class="re_tips" id="passtips"></span>

                            <!-- 重复密码 -->
                            <input type="password" name="repassword" placeholder="*确认密码" class="textInput w320"  id="repasscheck" autocomplete="off"/>
                            <span class="re_tips" id="repasstips"></span>
                            <!-- 验证码 -->
                            <input type="text" name="verify" placeholder="*验证码" class="verticationCode"  id="verify" />
                            <img src="{:U('verify')}"  class="verifyimg reloadverify" alt="点击切换..."/>
                            <label class="reloadverify"><a href="javascript:void(0)" id="reloadverify-a">点击图片换一张</a></label>
                            <span class="re_tips" id="imgtips"></span>

                            <!-- 选择box -->
                            <input type="checkbox" name="agreeProce" title="false" class="agreeProce agreeProce-box" value="1" id="checked"/>
                            <label for="checked">我接受注册用户协议并承诺点击（注册）按钮即表示我已阅读并接受注册用户协议</label>

                            <!-- 注册 -->
                            <span id="info"></span>
                            <input type="submit" value="注 册 &gt;&gt;" class="regist-btn  w320" id="submit"/>
            			</div>

            			<div>

                            <php>
                        		function random($length = 6 , $numeric = 0) {
                        			PHP_VERSION < '4.2.0' && mt_srand((double)microtime() * 1000000);
                        			if($numeric) {
                        				$hash = sprintf('%0'.$length.'d', mt_rand(0, pow(10, $length) - 1));
                        			} else {
                        				$hash = '';
                        				$chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789abcdefghjkmnpqrstuvwxyz';
                        				$max = strlen($chars) - 1;
                        				for($i = 0; $i < $length; $i++) {
                        					$hash .= $chars[mt_rand(0, $max)];
                        				}
                        			}
                        			return $hash;
                        		}
                        		$_SESSION['send_code'] = random(6,1);
                            </php>

                            <!-- 手机号码 -->
                            <input id="mobile" name="mobile" type="text"  placeholder="*手机号码(密码为手机号后6位)"  class="w150  textInput"  autocomplete="off" value=""/>

                            <span style="color:#FF0000">*</span>
                            <input id="zphone" type="button"  class="register-btn" value="获取验证码" onClick="get_mobile_code();" />
                            <span class="re_tips" id="teltips"></span>

                            <!-- 验证码 -->
                            <input type="text" size="8" name="mobile_code" placeholder="*验证码" id="code" class="w60 textInput" autocomplete="off" value="" />
                            <span class="re_tips" ></span>

                            <!-- 选择box -->
                            <input type="checkbox" name="agreeProce" title="false" class="agreeProce agreeProce-box" value="1" id="checked"/>
                            <label for="checked">我接受注册用户协议并承诺点击（注册）按钮即表示我已阅读并接受注册用户协议</label>

                            <span id="inf" style="color:red;font-size:15px;display:block;width:100%;height:20px;"></span>
                            <input type="submit" value="注 册 &gt;&gt;" class="regist-btn  w320" id="sub"/>
            			</div>
            		</div>
                    </form>
            	</div>
            </div>
        </div>

    <!-- 注册栏右侧提示框开始 -->
    <style>
        .tipsBox{
            float:left;
            margin-left:10px;
            margin-top:150px;
            border:10px solid #C8CBCC;
        }
    </style>
    <div class="tipsBox" style="float:left;">
        <span class="tips">Tips</span>
        <span class="great-icon"></span><p class="tipsInfo">立即注册成为我们的用户,将获得 200 积分的奖励 </p>
    </div>
</block>

<!-- js引入 -->
<block name="script">

	<script type="text/javascript">

    $(function(){
        var ok1 = false;
        var ok2 = false;
        var ok3 = false;
        var ok4 = false;

        // js验证---用户名
        var reg1= /^[A-Za-z][A-Za-z0-9-_]{5,16}$/;
        $("#username").blur(function(){
            if($('#username').val().length == 0){
                $('#nametips').html("请输入6-16位用户名");
            }else if(!reg1.test($(this).val())){
                $("#nametips").html("用户名格式错误");
            }else{
                $('#nametips').html("");
                ok1 = true;
            }
        });

        $("#username").keypress(function(e) {
            if (e.keyCode === 13) {
                $(".regist-btn").click();
                return false;
            }
        });

        // js验证---密码
        var reg4=/^[a-zA-Z\w]{6,16}$/;
        $("#password").blur(function(){
            if($('#password').val().length < 5){
                $('#passtips').html("请输入6位以上的密码");
            }else if(!reg4.test($(this).val())){
                $("#passtips").html("密码格式错误");
            }else{
                $('#passtips').html("");
                ok2 = true;
            }
        });

        $("#password").keypress(function(e) {
            if (e.keyCode === 13) {
                $(".regist-btn").click();
                return false;
            }
        });


        // js验证---重复密码
        $("#repasscheck").blur(function(){
            if($('#password').val()!== $('#repasscheck').val()){
                $('#repasstips').html("重复密码错误");
            }else{
                $('#repasstips').html("");
                ok3 = true;
            }
        });

        $("#repasscheck").keypress(function(e) {
            if (e.keyCode === 13) {
                $(".regist-btn").click();
                return false;
            }
        });

        // js验证---验证码
        $("#verify").blur(function(){
            if($(this).val().length !== 4){
                $('#imgtips').html("验证码不正确");
            }else{
                $('#imgtips').html("");
                ok4 = true;
            }
        });

        $("#verify").keypress(function(e) {
            if (e.keyCode === 13) {
                $(".regist-btn").click();
                return false;
            }
        });


        // 刷新验证码
        $(".reloadverify").click(function(){
            var verifyimg = $(".verifyimg").attr("src");
            var verifyimg = $(".verifyimg").attr("src" , verifyimg);
        });

        $('.regist-btn').click(function(){

            if($('#username').val().length == 0){
                // $('#nametips').html("请输入用户名");
            }else{
                $('#nametips').html("");
                ok1 = true;
            }

            if($('#password').val().length < 5){
                // $('#passtips').html("请输入5位以上的密码");
            }else{
                $('#passtips').html("");
                ok2 = true;
            }

            if($('#password').val() !== $('#repasscheck').val()){
                // $('#repasstips').html('密码不一致');
            }else{
                $('#repasstips').html("");
                ok3 =true;
            }


            if($("#verify").val().length !== 4){
                // $('#imgtips').html("请输入验证码");
            }else{
                $('#imgtips').html("");
                ok4 = true;
            }

            if (ok1 && ok2 && ok3 && ok4) {

                // 账号注册
                var username = $("#username").val();
                var password = $("#password").val();
                var repasscheck = $("#repasscheck").val();
                var verticationCode = $(".verticationCode").val();

                $.post("{:U('Home/User/register')}", { username: username, password : password , repassword : repasscheck , verify : verticationCode},function(data)
                {
                    if (data) {
                        $('#info').html(data);
                        // 失败重新加载验证码
                        var verifyimg = $(".verifyimg").attr("src");
                        $(".verifyimg").attr("src" , verifyimg);

                    }else{
                        $('#info').html('');

                        // 三秒跳主页
                        setTimeout(function(){
                            window.location.href = '{:U("Home/User/login")}';
                        } , 3000);

                        //引入遮罩层
                        $(document.body).height('');

                        $('<div id="zhao"></div>').css({
                            'width': $(window).width() + 'px',
                            'height': $(window).height() + 'px',
                            'background' : 'black',
                            'position': 'fixed',
                            'left' : 0,
                            'top' : 0,
                            'opacity' : 0.5,
                        }).appendTo( $(document.body) );

                        $('<img src="__PUBLIC__/Home/images/register_success.jpg" />').css({
                            'width' : 600 + 'px',
                            'height' : 400 + 'px',
                            'position': 'fixed',
                            'top' : 184 + 'px',
                            'left' : 383 + 'px',

                            // 'margin-top': -100 + 'px',
                            'z-index' : 10,
                        }).appendTo( $(document.body) );

                    }
                });
                return false;

            }else{
                $('#info').html('请填写完整').css('color' , 'red');
                return false;
            }
            return false;
        });

    });

    $(function(){
        var  ok1 = false;
        /*2  ..手机号验证*/
        var reg2= /^1[35689]\d{9}$/;
        $("#mobile").on("blur",function(){
            if(!reg2.test($(this).val())){
                $("#teltips").html("请输入13位手机号码");
            }else{
                $("#teltips").html("");
                ok1 = true;
            }
        });

        $("#mobile").keypress(function(e) {
            if (e.keyCode === 13) {
                $("#sub").click();
                return false;
            }
        });

        $('#sub').click(function(){

            if($('#mobile').val().length == 0){
                // $('#nametips').html("请输入用户名");
            }else{
                $('#nametips').html("");
                ok1 = true;
            }

            if(ok1){
                //快速注册提交
                var mobile =$('#mobile').val();
                var mobile_code = $('#code').val();
                $.post("{:U('Home/User/regist')}", {mobile:mobile,mobile_code,mobile_code},function(data){
                    if (data) {
                        $('#inf').html(data);
                    }else{
                        $('#inf').html('');

                        // 三秒跳主页
                        setTimeout(function(){
                            window.location.href = '{:U("Home/Index/Index")}';
                        } , 3000);

                        //引入遮罩层
                        $(document.body).height('');

                        $('<div id="zhao"></div>').css({
                            'width': $(window).width() + 'px',
                            'height': $(window).height() + 'px',
                            'background' : 'black',
                            'position': 'fixed',
                            'left' : 0,
                            'top' : 0,
                            'opacity' : 0.5,
                        }).appendTo( $(document.body) );

                        $('<img src="__PUBLIC__/Home/images/register_success.jpg"/>').css({
                            'width' : 600 + 'px',
                            'height' : 400 + 'px',
                            'position': 'fixed',
                            'top' : 200 + 'px',
                            'left' : 550 + 'px',

                            // 'margin-top': -100 + 'px',
                            'z-index' : 10,
                        }).appendTo( $(document.body) );
                    }
                });
            }else{
                $('#inf').html('请填写完整').css('color' , 'red');
                return false;
            }
            return false;
        });
    });

        /*使用冒泡方法添加按钮提交表单功能*/
        $(".regist-btn").attr({"disabled":"disabled"}).css({"background":"#0281C4","cursor":"no-drop"});
        /*点击则修改选定状态*/
        $(".agreeProce").click(function(){
            if ($(".agreeProce").attr('title')=='false') {
                $(".agreeProce").attr("checked","true");
                $(".agreeProce").attr("title","true");
                $(".regist-btn").attr({"disabled":false}).css({"background":"","cursor":""});
            }else{
                $(".agreeProce").attr("checked","false");
                $(".agreeProce").attr("title","false");
                $(".regist-btn").attr({"disabled":"disabled"}).css({"background":"#0281C4","cursor":"no-drop"});
            }
        });

	</script>

    <!-- 选项卡 -->
    <script>
	$(document).ready(function() {
		var widget = $('.tabs-basic');

		var tabs = widget.find('ul a'),
			content = widget.find('.tabs-content-placeholder > div');

		tabs.on('click', function (e) {

			e.preventDefault();

			var index = $(this).data('index');

			tabs.removeClass('tab-active');
			content.removeClass('tab-content-active');

			$(this).addClass('tab-active');
			content.eq(index).addClass('tab-content-active');
		});
	});
</script>

<!-- 手机短信验证 -->
<script type="text/javascript">

    //ajax点击将随机数和电话号码传过去
    function get_mobile_code(){
        $.post("{:U('Home/PhoneTest/mobile')}", {mobile:$.trim($('#mobile').val()),send_code:<?php echo $_SESSION['send_code'];?>}, function(msg) {
            alert($.trim(unescape(msg)));
            if(msg=='提交成功'){
                RemainTime();
            }
        });
    };

    // 计时器
    var iTime = 59;
    var Account;
    function RemainTime(){
        document.getElementById('zphone').disabled = true;
        var iSecond,sSecond="",sTime="";
        if (iTime >= 0){
            iSecond = parseInt(iTime%60);
            iMinute = parseInt(iTime/60);
            if (iSecond >= 0){
                if(iMinute>0){
                    sSecond = iMinute + "分" + iSecond + "秒";
                }else{
                    sSecond = iSecond + "秒";
                }
            }
            sTime=sSecond;
            if(iTime==0){
                clearTimeout(Account);
                sTime='获取手机验证码';
                iTime = 59;
                // $('#zphone').disabled = false;
                document.getElementById('zphone').disabled = false;
            }else{
                Account = setTimeout("RemainTime()",1000);
                iTime=iTime-1;
            }
        }else{
            sTime='没有倒计时';
        }
        document.getElementById('zphone').value = sTime;
    }
</script>
</block>
